<template>
	<div class="collapse-panel">
		<div class="collapse-panel2">
			<div class="header" :style="site=='left'?'justify-content: space-between;':'justify-content: flex-start;'">
				<div v-if="site=='left'">
					<div>{{ title }}</div>
					<div class="ss-font-24">已完成{{finishedTaskNum||0}} 剩余{{deviceRemainTotal||0}} 应完成{{totalTaskNum||0}}
					</div>
				</div>
				<image style="width: 32rpx;" mode="widthFix" v-if="isOpen" src="./bu.png"></image>
				<image style="width: 32rpx;" mode="widthFix" v-else src="./rg.png"></image>
				<div v-if="site!='left'">
					<div>{{ title }}</div>
					<div class="ss-font-24">已完成{{finishedTaskNum||0}} 剩余{{deviceRemainTotal||0}} 应完成{{totalTaskNum||0}}
					</div>
				</div>
			</div>
			<div class="header2 ss-r-10" @click="toggle(lock)" v-if="num==1"
				:style="{backgroundImage:status==2?'linear-gradient(to right, #f4f0e0,#edd2c4, #f4dadb)':(status==1?'linear-gradient(to right, #e2f6eb, #c4e7e2,#d8edf4)':'linear-gradient(to right,#ededed,#e1e1e1,#eaeaea)')}">
				<div v-if="site=='left'">
					<!-- lock == 2 锁定 -->
					<div>{{ title }}</div>
					<div class="ss-font-24">已完成{{finishedTaskNum||0}} 剩余{{deviceRemainTotal||0}} 应完成{{totalTaskNum||0}}
					</div>
				</div>
				<image style="width: 32rpx;" mode="widthFix" v-if="isOpen" src="./bu.png"></image>
				<image style="width: 32rpx;" mode="widthFix" v-else src="./rg.png"></image>
				<div v-if="site!='left'">
					<div class="ss-font-28">{{ title }}</div>
					<div class="ss-font-24">已完成{{finishedTaskNum||0}} 剩余{{deviceRemainTotal||0}} 应完成{{totalTaskNum||0}}
					</div>
				</div>
			</div>
			<div class="header2 ss-r-10" @click="toggle(lock)" v-if="num!=1" style="border:2rpx soild grey;"
				:style="{backgroundImage:lock==2?'linear-gradient(to right,#f9f9fb,#f6f6f9,#f9f9fb)':''}">
				<div v-if="site=='left'">
					<div class="ss-flex ss-font-28">
						<uv-icon v-if="status!=2" name="checkmark-circle-fill" color="#4EA770" size="18"></uv-icon>
						<uv-icon v-if="status==2" name="close-circle-fill" color="#FF3B30" size="18"></uv-icon>
						<div class="ss-m-x-10 ">{{ title }}</div>
					</div>
					<div class="ss-font-24 ss-flex ss-row-between" style="width: 100%;">
						<div class="ss-m-x-10">已完成{{finishedTaskNum||0}} 剩余{{deviceRemainTotal||0}}
							应完成{{totalTaskNum||0}}
						</div>
					</div>
					<div class="ss-flex ss-font-26 ss-row-between"
						style="width: 200rpx;height: 40rpx;margin-left: 120rpx;margin-top: 18rpx;"
						v-if="isOpen&&lock != 2" @click="jump(subPlanId)">
						<uv-icon name="search" color="#4EA770" size="20"></uv-icon>
						<div style="color: #4EA770;">查找相同设备</div>
					</div>
				</div>
				<div v-if="lock==2" @click="projectType = 2">
					<uv-icon name="lock-open" color="#BDBDBD" size="22"></uv-icon>
				</div>
				<div v-if="lock!=2">
					<image style="width: 32rpx;" mode="widthFix" v-if="isOpen" src="./bu.png"></image>
					<image style="width: 32rpx;" mode="widthFix" v-else src="./rg.png"></image>
				</div>

				<div v-if="site!='left'">
					<div>{{ title }}</div>
					<div class="ss-font-24 ">已完成{{finishedTaskNum||0}} 剩余{{deviceRemainTotal||0}} 应完成{{totalTaskNum||0}}
					</div>
				</div>
			</div>
			<transition name="slide-up">
				<div v-show="isOpen" class="content">
					<div class="ss-font-24 ss-flex ss-row-between" v-if="num!=1&&isOpen"
						style="height: 40rpx;width: 100%;margin-top: 18rpx;"></div>
					<slot :open="isOpen"></slot>
				</div>
			</transition>
		</div>
		<uv-overlay :show="projectType" v-if="projectType == 2">
			<view class="warp">
				<view class="rect ss-r-20" @tap.stop :style="{width:'580rpx'}">
					<view class="icon_mes">
						<uv-icon name="info-circle" size="55" color="#E93B3D"></uv-icon>
					</view>
					<view class="ss-font-32">
						确定提前解锁任务？
					</view>
					<view class="ss-m-y-10 ss-m-x-70 ss-font-26">
						注意：只能完成本月未完成设备数量多余数量无法生效？
					</view>
					<view class="rect_line"></view>
					<view class="ss-flex ss-row-between ss-col-center ss-font-28">
						<view class="rect_btn ss-m-x-20 ss-m-y-20" @click="back">取消</view>
						<view class="btn_line ss-m-x-10"></view>
						<view class="rect_btn ss-m-x-20 ss-m-y-20" style="color: #4EA770;" @click="getLock">
							解锁
						</view>
					</view>
				</view>
			</view>
		</uv-overlay>
	</div>
</template>

<script>
	import {
		unlock
	} from "@/request/task.js"
	export default {
		name: 'CollapsePanel',
		props: {
			title: String,
			open: Boolean,
			site: { //文字位置
				type: String,
				default: 'left',
			},
			inde: Number,
			num: Number,
			status: Number,
			totalTaskNum: Number,
			finishedTaskNum: Number,
			lock: Number,
			subPlanId: Number,
			deviceRemainTotal: Number,
			floorId: Number,
			deviceId: Number,
			searchId:Number
		},
		data() {
			return {
				projectType: '',
				isOpen: this.open || false,
			};
		},
		computed: {
			haveNum: function() {
				// console.log(this.num,'totalTaskNum-finishedTaskNum',this.lock)
				return this.totalTaskNum - this.finishedTaskNum;
			}
		},
		methods: {
			getLock() {
				unlock({
					deviceId: this.deviceId,
					floorId: this.floorId,
					subPlanId: uni.getStorageSync('subPlanId')?uni.getStorageSync('subPlanId'):''
				}).then(res => {
					if(res.code == 200){
						this.projectType = 0
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						console.log(res,'dddddddd')
					}
				})

			},
			back() {
				this.projectType = 0
			},
			toggle(e) {
				if (e == 2) return
				if (this.isOpen) {
					this.closeAllDescendants(this.$slots.default);
				}
				this.isOpen = !this.isOpen;
				this.$emit('toggle', this.isOpen)
			},
			closeAllDescendants(slots) {
				console.log(slots.componentInstance, '我再执行2')
				// if (slots) {
				// 	slots.forEach(slot => {
				// 		if (slot.componentInstance && slot.componentInstance.$options.name === 'CollapsePanel') {
				// 			slot.componentInstance.isOpen = false;
				// 			this.closeAllDescendants(slot.componentInstance.$slots.default);
				// 		}
				// 	});
				// }
			},
			jump(e) {
				uni.navigateTo({
					url: `/pages/Task/searchSystem?subPlanId=${e}`
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/uni.scss';

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		background-color: #fff;
		text-align: center;

		.icon_mes {
			width: 110rpx;
			margin: 20rpx auto;
			margin-top: 50rpx;
		}

		.image {
			margin-top: 50rpx;
			width: 70rpx;
			height: 76rpx;
		}

		.cardImage {
			margin-top: 50rpx;
			width: 70rpx;
			height: 80rpx;
		}

		.successImage {
			margin-top: 30rpx;
			width: 288rpx;
			height: 272rpx;
		}

		.rect_line {
			margin-top: 20rpx;
			width: 100%;
			height: 2rpx;
			background: #E5E5E5;
		}

		.rect_btn {
			width: 48%;
			text-align: center;
		}

		.success_btn {
			color: #4EA770;
			width: 98%;
			text-align: center;
		}

		.btn_line {
			height: 70rpx;
			width: 2rpx;
			background: #E5E5E5;
		}
	}

	.leftIcon {
		width: 100%;
		padding: 0 6rpx;
		box-sizing: border-box;
		height: 4rpx;
		margin: 14rpx auto;
	}

	.icon {
		text-align: center;
		background: #4EA770;
		position: fixed;
		border-radius: 50%;
		height: 92rpx;
		width: 92rpx;
		right: 2%;
		bottom: 5%;
		z-index: 100;
		box-sizing: border-box;
	}

	.collapse-panel {
		height: auto;
		overflow: hidden;
		line-height: 50rpx;
	}

	.content {
		// padding: 0 15rpx;
		overflow: hidden;
	}

	.slide-up-enter-active,
	.slide-up-leave-active {
		transition: all .5s ease;
	}

	.slide-up-enter,
	.slide-up-leave-to {
		transform: translateY(-100%);
	}

	.collapse-panel2 {
		position: relative;
	}

	.header {
		cursor: pointer;
		padding: 26rpx;
		display: flex;
		align-items: center;
		font-size: 1rem;
		border-bottom: 1px solid #eaeaea;
	}

	.header2 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		cursor: pointer;
		padding: 25rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		z-index: 1;
		font-size: 1rem;
		border: 1px solid #eaeaea;
		justify-content: space-between;
	}

	.header2:active {
		background-color: #f5f5f5;
	}

	.arrow {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 4px 0 4px;
		border-color: #999 transparent transparent transparent;
		transition: transform 0.3s ease;
	}
</style>